<!-- gauge图 -->
<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "Guage",
  props: {
    id: {
      required: true,
      type: String,
      default: "single-bar",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: String,
      default: "rgba(39, 129, 206, 1)",
    },
    chartData: {
      type: Array,
      default() {
        return [
          {
            value: 0,
          },
        ];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  watch: {
    chartData: {
      handler: function (newValue, oldValue) {
        this.getChart();
      },
      deep: true,
      // immediate: true,
    },
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  created() {},
  methods: {
    getChart() {
      this.chart = echarts.init(this.$refs[this.id]);
      const avgValue = this.chartData[0]?.value || 0;
      const option = {
        // backgroundColor: "#062a44",
        series: [
          {
            name: "刻度",
            type: "gauge",
            radius: "90%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 8, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "#4d5bd1",
              distance: 25,
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "25":
                    return "20";
                  case "50":
                    return "50";
                  case "75":
                    return "75";
                  case "100":
                    return "100";
                }
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                width: 1,
              },
              length: -8,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -20,
              lineStyle: {
                color: "#fff",
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            type: "gauge",
            radius: "60%",
            center: ["50%", "50%"],
            splitNumber: 0, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 15,
                color: [
                  [
                    avgValue / 100,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#5c53de",
                      },
                      {
                        offset: 1,
                        color: "#18c8ff",
                      },
                    ]),
                  ],
                  [1, "#413e54"],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            title: {
              show: true,
              offsetCenter: [0, "-26%"], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, "16%"],
              color: "#ffffff",
              formatter: function (params) {
                return params;
              },
              textStyle: {
                fontSize: 20,
              },
            },
            data: [
              {
                name: "平均值",
                value: avgValue.toFixed(2),
              },
            ],
          },
        ],
      };
      option && this.chart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped></style>
